<!DOCTYPE html>  
<html>  
<head>  
	<script src="../assets/plugins/jquery/jquery-1.9.1.min.js"></script>
    <title>WebSocket/SockJS Echo Sample (Adapted from Tomcat's echo sample)</title>  
    <style type="text/css">  
        #connect-container {  
            float: left;  
            width: 400px  
        }  
  
        #connect-container div {  
            padding: 5px;  
        }  
  
        #console-container {  
            float: left;  
            margin-left: 15px;  
            width: 1200px;
            height:1000px;  
        }  
  
        #console {  
/*             border: 1px solid #CCCCCC;  
            border-right-color: #999999;  
            border-bottom-color: #999999;  
            height: 170px;  
            overflow-y: scroll;   */
            padding: 5px;  
            width: 100%;  
        }  
  
        #console p {  
            padding: 0;  
            margin: 0;  
        }  
    </style>  
  
    <script src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>   
  
    <script type="text/javascript">  
        var ws = null;  
        var url = null;  
        var transports = [];  
        var ws;
        function setConnected(connected) {  
            document.getElementById('connect').disabled = connected;  
            document.getElementById('disconnect').disabled = !connected;  
            /* document.getElementById('echo').disabled = !connected;   */
        }  
  
        function connect() {  
        	
        	 if ('WebSocket' in window) {
               /*   alert("WebSocket"); */
                 ws = new WebSocket("ws://"+window.location.host+"/healthcervix/websocket");
             } else if ('MozWebSocket' in window) {
                 alert("MozWebSocket");
                 ws = new MozWebSocket("ws://websocket");
             } else {
                 alert("SockJS");
                 ws = new SockJS("http://"+window.location.host+"/healthcervix/websocket");
             }
            ws.onopen = function () {  
                setConnected(true);  
                log('Info: connection opened.');  
                echo();
            };  
            ws.onmessage = function (event) {  
                log('Received: ' + event.data);  
            };  
            ws.onclose = function (event) {  
                setConnected(false);  
                log('Info: connection closed.');  
                log(JSON.stringify(event));  
            };  
            
        }  
  
        function disconnect() {  
            if (ws != null) {  
                ws.close();  
                ws = null;  
            }  
            setConnected(false);  
        }  
  
        function echo() {  
            if (ws != null) {  
                var message = document.getElementById('message').value;  
                //log('info: ' + message);  
                ws.send(message);  
            } else {  
                alert('connection not established, please connect.');  
            }  
        }  
  
   

          
        function clear(){
        	alert(1);
        	$("#console").html("");
        }
        
        function log(message) {  
        	$("#console").append("<br/>");
			$("#console").append(message);
          //  console.append(message);  
/*             while (console.childNodes.length > 25) {  
                console.removeChild(console.firstChild);  
            }   */
         //   console.scrollTop = console.scrollHeight;  
        }  
    </script>  
</head>  
<body>  
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets   
    rely on Javascript being enabled. Please enable  
    Javascript and reload this page!</h2></noscript>  
<div>  
    <div id="connect-container">  
        <div>  
            <button id="connect" onclick="connect();">Connect</button>  
            <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>  
        </div>  
        <div>  
            <textarea id="message" style="width: 350px; display:none">If you see me,congratulate you that you have connected successfully !</textarea>  
        </div>  
<!--         <div>  
            <button id="echo" onclick="echo();" disabled="disabled">create communication</button>  
        </div>   -->
       <div>  
            <button id="clear" onclick="clear();" >clear console</button>  
        </div>  
    </div>  
    <div id="console-container">  
        <div id="console"></div>  
    </div>  
</div>  
</body>  
</html>  